<template>
    <div>
      <!--普通商品-->
      <div v-if="goodsType == 1">
        <van-goods-action class="bottom" v-if="this.storeNums !== 0">
          <van-goods-action-mini-btn icon="chat" text="客服" @click="toCustom"/>
          <van-goods-action-mini-btn icon="cart" text="购物车" v-if="goodsInfo.cart_number == 0" to="/shopChart"/>
          <van-goods-action-mini-btn icon="cart" text="购物车" v-else :info="goodsInfo.cart_number" to="/shopChart"/>
          <van-goods-action-mini-btn icon="like-o" text="我喜欢" @click="ifliked" v-if="goodsInfo.is_collect == 0"/>
          <van-goods-action-mini-btn icon="like" text="我喜欢" @click="iflike" v-else/>
          <van-goods-action-big-btn text="加入购物车" style="background: #333;" @click="joinChart"/>
          <van-goods-action-big-btn text="立即购买" primary @click="joinChart" />
          <!--<van-goods-action-big-btn text="APP下载" primary  url="http://www.napin.com/download.html"/>-->
        </van-goods-action>
        <van-goods-action class="bottom" v-else>
          <van-goods-action-mini-btn icon="chat" text="客服" @click="toCustom"/>
          <van-goods-action-mini-btn icon="cart" text="购物车" v-if="goodsInfo.cart_number == 0" to="/shopChart"/>
          <van-goods-action-mini-btn icon="cart" text="购物车" v-else :info="goodsInfo.cart_number" to="/shopChart"/>
          <van-goods-action-mini-btn icon="like-o" text="我喜欢" @click="ifliked" v-if="goodsInfo.is_collect == 0"/>
          <van-goods-action-mini-btn icon="like" text="我喜欢" @click="iflike" v-else/>
          <van-goods-action-big-btn text="到货提醒" style="background: #ff4c50;" @click="addNotice" v-if="!is_notice"/>
         <van-goods-action-big-btn text="您已添加到货提醒" style="background: #333333;" v-else/>
          <!--<van-goods-action-big-btn text="APP下载" primary  url="http://www.napin.com/download.html"/>-->
        </van-goods-action>
      </div>

      <!--团购-->
      <div v-if="goodsType == 2">
        <van-goods-action class="bottoms"  v-if="this.storeNums !== 0">
          <van-goods-action-mini-btn icon="chat" text="客服" @click="toCustom"/>
          <van-goods-action-mini-btn icon="cart" text="购物车" :info="goodsInfo.cart_number" to="/shopChart"/>
          <van-goods-action-mini-btn icon="like-o" text="我喜欢" @click="ifliked" v-if="goodsInfo.is_collect == 0"/>
          <van-goods-action-mini-btn icon="like" text="我喜欢" @click="iflike" v-else/>
          <van-goods-action-big-btn text="独自购买" primary @click="groupChart" v-if="!is_join_group"/>
          <p class="linePrice" @click="groupChart" v-if="!is_join_group">￥{{goodsInfo.line_price}}</p>
          <van-goods-action-big-btn text="我要开团"  @click="groupChart" v-if="!is_join_group"/>
          <p class="salePrece" @click="groupChart" v-if="!is_join_group">￥{{goodsInfo.sale_price}}</p>
          <van-goods-action-big-btn text="已开团"  v-if="is_join_group" style="background:#333333;line-height:50px;"/>
        </van-goods-action>
        <van-goods-action class="bottom" v-else>
          <van-goods-action-mini-btn icon="chat" text="客服" @click="toCustom"/>
          <van-goods-action-mini-btn icon="cart" text="购物车" :info="goodsInfo.cart_number" to="/shopChart"/>
          <van-goods-action-mini-btn icon="like-o" text="我喜欢" @click="ifliked" v-if="goodsInfo.is_collect == 0"/>
          <van-goods-action-mini-btn icon="like" text="我喜欢" @click="iflike" v-else/>
          <van-goods-action-big-btn text="到货提醒" style="background: #ff4c50;" @click="addNotice" v-if="!is_notice"/>
         <van-goods-action-big-btn text="您已添加到货提醒" style="background: #333333;" v-else/>
        </van-goods-action>
      </div>
      <!--限时限量-->
     <div v-if="goodsType == 3">
       <van-goods-action class="bottom">
         <van-goods-action-mini-btn icon="chat" text="客服" @click="toCustom"/>
         <van-goods-action-mini-btn icon="cart" text="购物车" v-if="goodsInfo.cart_number == 0" to="/shopChart"/>
         <van-goods-action-mini-btn icon="cart" text="购物车" v-else :info="goodsInfo.cart_number" to="/shopChart"/>
         <van-goods-action-mini-btn icon="like-o" text="我喜欢" @click="ifliked" v-if="goodsInfo.is_collect == 0"/>
         <van-goods-action-mini-btn icon="like" text="我喜欢" @click="iflike" v-else/>
         <van-goods-action-big-btn text="立即购买" primary @click="limitChart" v-if="this.storeNums !== 0&&!is_notice"/>
         <van-goods-action-big-btn text="到货提醒" style="background: #ff4c50;" @click="addNotice" v-else-if="!is_notice"/>
         <van-goods-action-big-btn text="您已添加到货提醒" style="background: #333333;" v-else/>
       </van-goods-action>
       <!--<van-goods-action class="bottom" v-else>
         <van-goods-action-mini-btn icon="chat" text="客服" @click="toCustom"/>
         <van-goods-action-mini-btn icon="cart" text="购物车" v-if="goodsInfo.cart_number == 0" to="/shopChart"/>
         <van-goods-action-mini-btn icon="cart" text="购物车" v-else :info="goodsInfo.cart_number" to="/shopChart"/>
         <van-goods-action-mini-btn icon="like-o" text="我喜欢" @click="ifliked" v-if="goodsInfo.is_collect == 0"/>
         <van-goods-action-mini-btn icon="like" text="我喜欢" @click="iflike" v-else/>
         <van-goods-action-big-btn text="到货提醒" style="background: #ff4c50;" @click="addNotice"/>
         &lt;!&ndash;<van-goods-action-big-btn text="APP下载" primary  url="http://www.napin.com/download.html"/>&ndash;&gt;
       </van-goods-action>-->
      </div>
      <div v-if="goodsType == 6">
        <van-goods-action class="bottom" v-if="this.storeNums !== 0">
          <van-goods-action-mini-btn icon="chat" text="客服" @click="toCustom"/>
          <van-goods-action-mini-btn icon="cart" text="购物车" v-if="goodsInfo.cart_number == 0" to="/shopChart"/>
          <van-goods-action-mini-btn icon="cart" text="购物车" v-else :info="goodsInfo.cart_number" to="/shopChart"/>
          <van-goods-action-mini-btn icon="like-o" text="我喜欢" @click="ifliked" v-if="goodsInfo.is_collect == 0"/>
          <van-goods-action-mini-btn icon="like" text="我喜欢" @click="iflike" v-else/>
          <van-goods-action-big-btn text="加入购物车" style="background: #333;" @click="joinChart"/>
          <van-goods-action-big-btn text="立即购买" primary @click="joinChart" />
          <!--<van-goods-action-big-btn text="APP下载" primary  url="http://www.napin.com/download.html"/>-->
        </van-goods-action>
        <van-goods-action class="bottom" v-else>
          <van-goods-action-mini-btn icon="chat" text="客服" @click="toCustom"/>
          <van-goods-action-mini-btn icon="cart" text="购物车" v-if="goodsInfo.cart_number == 0" to="/shopChart"/>
          <van-goods-action-mini-btn icon="cart" text="购物车" v-else :info="goodsInfo.cart_number" to="/shopChart"/>
          <van-goods-action-mini-btn icon="like-o" text="我喜欢" @click="ifliked" v-if="goodsInfo.is_collect == 0"/>
          <van-goods-action-mini-btn icon="like" text="我喜欢" @click="iflike" v-else/>
          <van-goods-action-big-btn text="到货提醒" style="background: #ff4c50;" @click="addNotice" v-if="!is_notice"/>
          <van-goods-action-big-btn text="您已添加到货提醒" style="background: #333333;" v-else/>
          <!--<van-goods-action-big-btn text="APP下载" primary  url="http://www.napin.com/download.html"/>-->
        </van-goods-action>
      </div>
    </div>
</template>

<script>
  import request from '../../request/index'
    export default {
      name: "goodsBottom",
      props:["goodsType",'goodsInfo','show','storeNums','activity_id','is_join','isNotice'],
      data(){
        return{
          code:0,
          respon:[],
          goodsId:this.$route.query.goods_id,
          group_ids:this.$route.query.group_id,//this.$route.query.group_id
          limit_ids:this.$route.query.limit_id,//this.$route.query.limit_id
          goods_ids:this.$route.query.goods_id,//this.$route.query.goods_id
          is_notice:0,
          is_join_group:0,
        }
      },
      methods:{
        limitChart(){
          request.getGoodsSpec(this,this.goodsType,this.activity_id);
          this.$emit("limitDisplay")
        },
        toCustom(){
          document.getElementById('YSF-BTN-HOLDER').onclick();
        },
        addNotice(){
            request.addNotice(this);
        },
        joinChart(){
          request.getGoodsSpec(this,this.goodsType,this.activity_id);
         this.$emit("display","show")
        },
        groupChart(){
          request.getGoodsSpec(this,this.goodsType,this.activity_id);
          this.$emit("groupdisplay");
        },
        ifliked(){
          request.ifLiked(this,1,this.goodsId);
          this.goodsInfo.is_collect = 1;
        },
        iflike(){
          request.ifLiked(this,2,this.goodsId);
          this.goodsInfo.is_collect= 0;
        }
      },
      created(){
        
        
      },
      mounted () {
        this.is_notice=this.goodsInfo.is_notice;
        this.is_join_group=this.is_join;
        this.is_notice=this.isNotice;
      }
    }
</script>

<style scoped lang="scss">
  .bottoms{
    .linePrice{
      right:34.5vw;
      top: 1vw;
    }
    @media screen and (min-width:320px) and (max-width:360px) {
      .linePrice{
        right:32.5vw;
      }
      .salePrece{
        right:5vw !important;
      }
    }
      .salePrece{
      right: 6.5vw;
      top: 1vw;
    }
    p{
      position: absolute;
      color: #fff;
      font-family:PingFang-SC-Heavy;
      font-weight:400;
      color:rgba(255,255,255,1);
    }
  }
  @media only screen and (device-width: 375px) and (device-height:812px) and (-webkit-device-pixel-ratio:3) {
    .bottom,.bottoms {
      padding-bottom:34px;
      background: #fff;
    }
  }
</style>
<style lang="scss">
  .van-icon-like::before{
    color: #ff4c50;
  }
  .bottoms{
    .van-button--bottom-action{
     /* line-height: 8vw;*/
    }
    .van-goods-action-big-btn{
      line-height: 17vw;
    }
    @media screen and (min-width:320px) and (max-width:359px){
      .van-goods-action-big-btn{
        line-height: 21vw !important;
      }
    }
  }
</style>
